/**
 * Created by Administrator on 2017/4/17 0017.
 */
import React from "react";
import Relay from "react-relay";
import { message } from 'antd';
import { Modal } from 'fly';
import ReqAdditionalMutation from "../mutation/ReqAdditionalMutation"
import DetailUploadModal from "./DetailUploadModal";
import PackTradeApply from './PackTradeApply';
import DelQiniuFileMutation from "./mutation/DelQiniuFileMutation"
import Util from "../../../util/Util";
import './css/order_detail_supplement.css'

export default class Modal_PayFor extends React.Component{
    constructor(props){
        super(props);
        this.state={
            visible: false,
            oid: '',
            account:'',
            inputaccount:'',
            textareadesp:'',
            highLight1:false,
            highLight2: false
        }
        this.instructions = [];
    }

    _onCancel(){
        this.instructions = [];
        this.setState({
            visible:false
        });
    }
    changeAccount(e){
        let text = e.target.value;
        let regular = /^[0-9]+\.?[0-9]{0,2}$/
        if(!regular.test(text) && text != ''){
          return
        } else {
          this.setState({
              inputaccount:text
          });
        }
    }

    changeDesp(e){
        let text = e.target.value;
        this.setState({
            textareadesp:text
        });
    }

    modalAfterClose(){
        this.setState({
            inputaccount:'',
            textareadesp:'',
        });
    }

    _SureFor(){
        if(this.state.inputaccount==''){
            message.info('请填写金额');
            return
        }

        if(this.state.textareadesp==''){
            message.info('请填写说明');
            return
        }
        let textareadesp = this.state.textareadesp.replace(/\s/g,'');
        if(textareadesp.length==0){
            message.info('说明不能为空');
            return
        }

        let contractUrList = []
        this.instructions.map((context,index)=>{
          contractUrList.push(context.sid);
        });
        Relay.Store.commitUpdate(
            new ReqAdditionalMutation({
                desp:this.state.textareadesp,
                money:this.state.account,
                orderId:this.state.oid,
                uid:this.props.uid,
                supplyAccount:(parseFloat(this.state.inputaccount).toFixed(2))*100,
                contractUrl: contractUrList[0]||'',
                contractUr2: contractUrList[1]||'',
                contractUr3: contractUrList[2]||'',
                contractUr4: contractUrList[3]||'',
                contractUr5: contractUrList[4]||''
            }),
            {
                onFailure: () => {

                },
                onSuccess: (response) => {
                    let errorCode = response.reqAdditional.reqAdditional.errorCode;
                    if(errorCode==0){
                      message.config({
                        top: 50,
                        duration: 3,
                      });
                      message.success('您已经成功发起补充合同的申请，请等待乙方同意。');
                      this.setState({
                          visible:false
                      });
                      this.instructions = [];
                    } else {
                      message.info(response.reqAdditional.reqAdditional.value)
                    }
                }
            }
        )

    }

    addinstructions() {
        if (this.instructions.length >= 1) {
            message.info('只能上传一个');
            return
        }
        this.refs.deup.setState({
            visible: true
        });
    }

    addSupplementPart(){
        if(this.state.fullin){
            return(
                <div>

                </div>
            );
        }else{
            return(
                <div>
                    <div className={'order_orderpurch_modal_payfor_oiddiv'}>实际金额：{this.state.inputaccount}</div>
                    <div className={'order_orderpurch_modal_payfor_oiddiv'}>补充说明：{this.state.textareadesp}</div>
                    <div className={'order_orderpurch_modal_payfor_divforbuttonagree'} onClick={this._Agree.bind(this)}>同意</div>
                    <div className={'order_orderpurch_modal_payfor_divforbuttonagreenone'} onClick={this._Disagree.bind(this)}>不同意</div>
                </div>
            );
        }

    }

    addpact(name, hash, url, fileKey,sid) {
        this.instructions.push({"name": name, "hash": hash, "url": url, "fileKey": fileKey,"sid":sid});
        this.setState({
            instructions: this.instructions
        });
    }

    attach() {
        if (this.instructions) {
          return this.instructions.map((item, index)=> {
              return (
                  <PackTradeApply  key={index} item={item} delqiniufile={this.delqiniufile.bind(this)} type={'accessory'}/>
              );
          })
        }
    }
    delqiniufile(item, fileKye) {
        Relay.Store.commitUpdate(
            new DelQiniuFileMutation({
                fileKey: fileKye
            }),
            {
                onFailure: () => {

                },
                onSuccess: (response) => {
                    let errorCode = response.delQiniuFile.delQiniuFile.errorCode;
                    if (errorCode == 0) {
                        Util.removedarrayitem(this.instructions, item);
                        this.setState({
                            instructions: this.instructions
                        });
                    }
                }
            }
        )
    }

    focusAccount(type) {
        type == 'account' ? (
            this.setState({
                highLight1: true
            })
        ) : (
            this.setState({
                highLight2: true
            })
        )

    }
    blurAccount(){
        this.setState({
            highLight1: false,
            highLight2: false
        })
    }
    render(){
        return (
            <Modal
              visible={this.state.visible}
              title={'合同补充'}
              wrapClassName="order_detail_supplement"
              maskClosable={true}
              okText={'确定'}
              // footer={null}
                onOk={this._SureFor.bind(this)}
              onCancel={this._onCancel.bind(this)}
              afterClose={this.modalAfterClose.bind(this)}>
                <div className={'order_orderpurch_modal_payfor_oiddiv'}>订单编号：{this.state.oid}</div>
                <div className={'order_orderpurch_modal_payfor_oiddiv'}>合同金额：￥{(this.state.account/100).toFixed(2)}</div>
                <div style={{marginLeft:'50px'}} className={'order_orderpurch_modal_payfor_oiddiv'}><span style={{color:'red'}}>*</span>调整后金额：
                    <input
                        className={'order_orderpurch_modal_payfor_oidinput'}
                        ref={'accountinput'}
                        onChange={this.changeAccount.bind(this)}
                        onFocus={this.focusAccount.bind(this, 'account')}
                        onBlur={this.blurAccount.bind(this)}
                        value={this.state.inputaccount}
                        style={this.state.highLight1 ? {border: '1px solid #36b3b3'} : {}}
                    />
                </div>
                <div style={{marginLeft:'64px'}} className={'order_orderpurch_modal_payfor_oiddiv'}>
                    <span className="order_orderpurch_modal_payfor_oidspan"><span style={{color:'red'}}>*</span>调整理由：</span>
                    <textarea
                        className={'order_orderpurch_modal_payfor_textarea'}
                        ref={'textarea'}
                        value={this.state.textareadesp}
                        onChange={this.changeDesp.bind(this)}
                        onFocus={this.focusAccount.bind(this, 'desp')}
                        onBlur={this.blurAccount.bind(this)}
                        style={this.state.highLight2 ? {border: '1px solid #36b3b3'} : {}}
                    />
                </div>
                <div>
                  <div style={{minHeight: 0, marginLeft: "40px", marginTop: "20px",overflow:"hidden"}}>
                      <div className="order_orderpurch_modal_payfor_contr" style={{float: "left"}}>
                          {
                              this.attach()
                          }
                      </div>
                  </div>
                  <span className="order_orderpurch_modal_payfor_addContr" onClick={this.addinstructions.bind(this)}>添加附件</span>
                </div>
                {/*<div className={'order_orderpurch_modal_payfor_divforbutton'} onClick={this._SureFor.bind(this)}>确定</div>*/}
                <DetailUploadModal ref={'deup'} addpact={this.addpact.bind(this)} mid={'creat'}/>
            </Modal>
        )
    }
}
